<template>
	<view class="">
		<view class="" style="display: flex;justify-content: center;margin-top: 20px;margin-bottom: 20px;">
			<view class="quanjing_class" style="margin: 0 30rpx;" @click="tabActive(0)" :class="{'active':iSshow==0}">
				内涵解读
			</view>
			<view class="quanjing_class" style="margin: 0 30rpx;" @click="tabActive(1)" :class="{'active':iSshow==1}">
				仿真体验
			</view>
			<view class="quanjing_class" style="margin: 0 30rpx;" @click="tabActive(2)" :class="{'active':iSshow==2}">
				测试题
			</view>
		</view>
		<view class="" v-show="iSshow==0">
			<div class>
				<iframe v-if="content.meaningPreview!=0" style="width: 98%; height: 950rpx;margin:15px auto;display: block;"
					:src="'./static/pdfjs/web/viewer.html?file=' + content.meaningPreview[0]" frameborder="0"></iframe>
				<div v-else>暂无数据</div>
			</div>
		</view>
		<view class="" style="padding: 0 30rpx;" v-show="iSshow==1">
			<img :src="content.faceUrl" />
			<div class="" style="min-height: 500px;" v-html="content.vrDetail"></div>
		</view>
		<div class="" v-show="iSshow==2">
			<div class="test" v-if="content.testPreview != 0">
				<div class="content-title">
					测试题
				</div>
				<div class="exam-list">
					<div class="exam-item" v-for="(item, index) in content.testPreview" :key="item.id">
						<div class="exam-item-line">
							<div class="exam-item-left">{{ index + 1 }}.</div>
							<div class="exam-item-right">
								<span v-if="item.testType == 1">(单选题)</span>
								<span v-if="item.testType == 2">(多选题)</span>
								<span v-if="item.testType == 3">(判断题)</span>
								<span>
									{{ item.title }}
								</span>
							</div>
						</div>
						<div class="exam-item-line" v-if="item.testType == 1 || item.testType == 2">
							<div class="exam-item-left">选项:</div>
							<div class="exam-item-right">
								<div style="display: flex;" v-for="(opt, idx) in item.choose" :key="idx">
									<div>{{ xuanxiang[idx] }}:</div>
									<div style="margin-left: 10rpx;">{{ opt }}</div>
								</div>
							</div>
						</div>
						<div class="exam-item-line">
							<div class="exam-item-left">答案:</div>
							<div class="exam-item-right">
								<template v-if="item.testType == 1 || item.testType == 2">
									<template v-if="!item.checked">
										<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
										<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
									</template>
									<template v-else>
										<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
										<span style="text-decoration: underline;" >{{ item.answer[0] }}</span>
										<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
									</template>
								</template>
								<template v-if="item.testType == 3">
									<template v-if="!item.checked">
										<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
										<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
									</template>
									<template v-else>
										<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
										<span style="text-decoration: underline;">{{ item.answer[0] == 1 ? '√' : '×' }}</span>
										<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
									</template>
								</template>
								
								<template>
									<a  v-if="!item.checked" @click="item.checked = !item.checked" class="prompt">提示</a>
									<a  v-else @click="item.checked = !item.checked" class="prompt prompts">关闭提示</a>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-else style="text-align: center;">暂无数据</div>
			</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				iSshow: 0,
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'],
			}
		},
		onLoad(option) {
			console.log('id===》', option.id)
			this.getVrDetail(option.id)
		},
		created() {

		},
		methods: {
			tabActive(index) {
				this.iSshow = index
			},
			voviurl() {
				uni.navigateTo({
					url: './weburl?url=' + this.content.voviUrl
				})
			},
			getVrDetail(vrId) {
				var that = this
				that.pyReq(that.$http.getVrDetail, {
					vrId: vrId
				}, function(res) {
					console.log('res', res.result)
					if (!res.result.testPreview) {
						res.result.testPreview = 0
					} else {
						res.result.testPreview.map((item, index) => {
							item['checked'] = false
							// console.log(item)
						})
					}
					that.content = res.result
					if (!that.content.meaningEdit) {
						that.content.meaningEdit = 0
					}
					if (!that.content.testEdit) {
						that.content.testEdit = 0
					}
					if (!that.content.meaningPreview) {
						that.content.meaningPreview = 0
					}
				});
				// that.pyReq(that.$http.getVrDetail, {
				// 	vrId: vrId
				// }, function(res) {
				// 	console.log('that.content',res.result)
				// 	if(res.result.testPreview){
				// 		res.result.testPreview.map((item, index) => {
				// 			item['checked'] = false
				// 		})
				// 	}else{
				// 		res.result.testPreview = 0
				// 	}
					
				// 	that.content = res.result
				// });
			}
		}
	}
</script>

<style scoped>
	.quanjing_class{
		font-size: 14px;
	}
	
	.active {
		color: red;
		border-bottom: 2rpx solid red;
	}

	.prompt {
		background-color: rgb(255, 67, 81);
		border: none;
		color: #fff;
		font-size: 20rpx;
		border-radius: 6px;
		line-height: 30px;
		    height: 30px;
		    padding: 0 30px;
		display: inline-block;
		text-align: center;
		margin-left: 10px;
	}

	.prompts {
		background-color: #409EFF;
	}
	.title {
		/* text-align: center; */
		font-size: 36rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		margin-left: 10px;
	}
	.video {
		padding: 0 20rpx;
	}
	.w100 {
		width: 100%;
		text-align: center;
		margin-top: 30rpx;
	}
	.content, .test {
		padding: 0 40rpx;
		margin-top: 30rpx;
	}
	.content-title {
		font-size: 40rpx;
		font-weight: bolder;
		margin-left: -16rpx;
		border-top: 1px dashed #eee;
	}
	.exam-item {
		position: relative;
		margin-bottom: 20rpx;
	}
	.exam-item::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -20rpx;
		transform: translateX(-50%);
		height: 1px;
		background-color: #eee;
		width: 50%;
	}
	.exam-item-line {
		display: flex;
		margin-bottom: 10rpx;
	}
	.exam-item-left {
		width: 90rpx;
		text-align: right;
	}
	.exam-item-right {
		flex: 1;
		margin-left: 10rpx;
	}
</style>
